<script setup lang="ts">
import { useDark, useECharts } from "@pureadmin/utils";
import { color } from "echarts";
import { type PropType, ref, computed, watch, nextTick } from "vue";


const props = defineProps({
  data: {
    type: Object,
    default: () => []
  }
});

 console.log("单啊啊啊啊啊啊啊，", props);
const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  theme
});


const getSeries = () => {
  let res = []
  props.data?.data.forEach(item => {
    console.log("props.data?.dataaaa", item);
    res.push({
      data: item.value,
      name: item.name,
      type: 'bar',
      color: "#07C7E0",
      
      itemStyle: {
        borderRadius: [10, 10, 0, 0],
        color: new echarts.graphic.LinearGradient(
          0, 1, 0, 0, [{//只要修改前四个参数就ok
            offset: 0,
            color: '#2B3150'
          }, //柱图渐变色
          {
            offset: 1,
            color: '#07C7E0'
          }
        ]
        ),
      },

    })
  });
  // console.log("单主状态，res", res);

  return res
}
const getxAxis = () => {
  let res = []
  props.data?.xAxis.forEach(item => {
    res.push(item)
  })
   console.log("打开分开发", res);
  return res
}


watch(
  () => props.data,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      container: ".singlebar-card",
      // color: ["#41b6ff", "#e85f33"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none"
        }
      },
      grid: {
        left: '3%',

        right: 0,
        bottom: '3%',
        containLabel: true
      },
      legend: {
        data: ['设备数量'],
        itemWidth: 8,

        itemHeight: 8,
        textStyle: {
          // color: "",
          // fontSize: "0.875rem"
          fontSize: "0.875rem",
                 fontWeight:400,
                 fontFamily:'PingFang SC',
        },
        top: 0,
        left: 0,
        icon: "circle"
      },

      xAxis: [
        {
          type: "category",
          max: 3,
          data: props.data?.xAxis,
          // axisLabel: {
          //   fontSize: "0.875rem"
          // },
          axisLabel: {
		formatter: function(params) {
			var newParamsName = "";
			var paramsNameNumber = params.length;
			// 设置一行显示多少字
			var provideNumber = 6;
			var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
			if (paramsNameNumber > provideNumber) {
				for (var p = 0; p < rowNumber; p++) {
					var tempStr = "";
					var start = p * provideNumber;
					var end = start + provideNumber;
					if (p == rowNumber - 1) {
						tempStr = params.substring(start, paramsNameNumber);
					} else {
						tempStr = params.substring(start, end) + "\n";
					}
					newParamsName += tempStr;
				}
			} else {
				newParamsName = params;
			}
			return newParamsName
		}
	},

          axisPointer: {
            type: "shadow"
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            fontSize: "0.875rem"
          },
          splitLine: {
            show: false // 去网格线
          }
          // name: "单位: 个"
        }
      ],
      dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: true, //是否显示滑动条，不影响使用
        type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: props.data?.endValue, // 一次性展示几个。
      },
    ],
      series: [
        {
          data: props.data?.data,
          name: props.data?.name,
          type: 'bar',
          color: "#07C7E0",
          barWidth: 10,
          itemStyle: {
            borderRadius: [10, 10, 0, 0],
            color: new echarts.graphic.LinearGradient(
              0, 1, 0, 0, [{//只要修改前四个参数就ok
                offset: 0,
                color: '#2B3150'
              }, //柱图渐变色
              {
                offset: 1,
                color: '#07C7E0'
              }
            ]
            ),
          },
        }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 260px" />
</template>
